<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*
 *  This animation shake a bell.
 *  The percents are separated to add a "delay" between cycles
 *
 *  name: bell-shake
 */

        @-webkit-keyframes bell-shake {
            1% {
                -webkit-transform: rotateZ(15deg);
                transform-origin: 50% 0%;
            }
            2% {
                -webkit-transform: rotateZ(-15deg);
                transform-origin: 50% 0%;
            }
            3% {
                -webkit-transform: rotateZ(20deg);
                transform-origin: 50% 0%;
            }
            4% {
                -webkit-transform: rotateZ(-20deg);
                transform-origin: 50% 0%;
            }
            5% {
                -webkit-transform: rotateZ(15deg);
                transform-origin: 50% 0%;
            }
            6% {
                -webkit-transform: rotateZ(-15deg);
                transform-origin: 50% 0%;
            }
            7% {
                -webkit-transform: rotateZ(0deg);
                transform-origin: 50% 0%;
            }
            100% {
                -webkit-transform: rotateZ(0deg);
                transform-origin: 50% 0%;
            }
        }
        @-moz-keyframes bell-shake {
            1% {
                -moz-transform: rotateZ(15deg);
                transform-origin: 50% 0%;
            }
            2% {
                -moz-transform: rotateZ(-15deg);
                transform-origin: 50% 0%;
            }
            3% {
                -moz-transform: rotateZ(20deg);
                transform-origin: 50% 0%;
            }
            4% {
                -moz-transform: rotateZ(-20deg);
                transform-origin: 50% 0%;
            }
            5% {
                -moz-transform: rotateZ(15deg);
                transform-origin: 50% 0%;
            }
            6% {
                -moz-transform: rotateZ(-15deg);
                transform-origin: 50% 0%;
            }
            7% {
                -moz-transform: rotateZ(0deg);
                transform-origin: 50% 0%;
            }
            100% {
                -moz-transform: rotateZ(0deg);
                transform-origin: 50% 0%;
            }
        }
        @keyframes bell-shake {
            1% {
                transform: rotateZ(15deg);
                transform-origin: 50% 0%;
            }
            2% {
                transform: rotateZ(-15deg);
                transform-origin: 50% 0%;
            }
            3% {
                transform: rotateZ(20deg);
                transform-origin: 50% 0%;
            }
            4% {
                transform: rotateZ(-20deg);
                transform-origin: 50% 0%;
            }
            5% {
                transform: rotateZ(15deg);
                transform-origin: 50% 0%;
            }
            6% {
                transform: rotateZ(-15deg);
                transform-origin: 50% 0%;
            }
            7% {
                transform: rotateZ(0deg);
                transform-origin: 50% 0%;
            }
            100% {
                transform: rotateZ(0deg);
                transform-origin: 50% 0%;
            }
        }
        .bell {
            height: 100px;
            width: 100px;
            margin: 5px auto 0;
        }
        .attribution {
            font-family: Helvetica Neue, sans-serif;
            text-align: center;
        }
        .attribution p {
            margin: 0;
            color: #777;
            font-size: 0.9em;
        }
        .attribution p a {
            /* Bell shake */

            text-decoration: none;
            color: #3ea3ea;
        }
        .bell-shake--hover:hover,
        .bell-shake--hover:focus,
        .bell-shake {
            -webkit-animation: bell-shake 40s ease infinite;
            -moz-animation: bell-shake 40s ease infinite;
            animation: bell-shake 40s ease infinite;
        }
        .bell-shake-delay {
            -webkit-animation: bell-shake 40s ease 3s infinite;
            -moz-animation: bell-shake 40s ease 3s infinite;
            animation: bell-shake 40s ease 3s infinite;
        }
    </style>
</head>
<body>
<div class="bell">
    <svg class="bell-shake-delay" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="5.0 -10.0 100.0 135.0" enable-background="new 0 0 100 100" xml:space="preserve">
        <path fill="#888888" d="M78.382,69.688c-1.328,0-2.812-2.807-2.812-6.562V44.125h-0.015c-0.13-11.322-8.998-20.726-20.66-22.731  c-0.243-2.356-2.217-4.206-4.638-4.206c-2.421,0-4.395,1.85-4.638,4.206c-11.662,2.005-20.53,11.409-20.66,22.731h-0.015v19.001  c0,3.755-1.485,6.562-2.812,6.562c-1.551,0-2.812,1.261-2.812,2.812c0,1.551,1.262,2.812,2.812,2.812h19.783  c0.473,4.208,4.01,7.5,8.343,7.5c4.332,0,7.87-3.292,8.342-7.5h19.783c1.551,0,2.812-1.262,2.812-2.812  C81.194,70.949,79.933,69.688,78.382,69.688z M50.257,19.062c1.287,0,2.364,0.874,2.695,2.056c-0.887-0.088-1.784-0.137-2.695-0.137  c-0.912,0-1.81,0.049-2.696,0.137C47.893,19.936,48.969,19.062,50.257,19.062z M26.819,63.125v-18.75  c0-11.865,10.514-21.519,23.438-21.519c12.923,0,23.438,9.653,23.438,21.519v18.75c0,2.725,0.661,5.041,1.708,6.562H25.11  C26.158,68.166,26.819,65.85,26.819,63.125z M50.257,80.938c-3.298,0-6.008-2.454-6.468-5.625h12.935  C56.264,78.484,53.554,80.938,50.257,80.938z M78.382,73.438h-56.25c-0.516,0-0.938-0.421-0.938-0.938  c0-0.517,0.421-0.938,0.938-0.938h56.25c0.516,0,0.938,0.421,0.938,0.938C79.319,73.017,78.898,73.438,78.382,73.438z"
        />
        <ellipse fill="#888888" cx="40.881" cy="50.938" rx="1.875" ry="2.812" />
        <ellipse fill="#888888" cx="59.632" cy="50.938" rx="1.875" ry="2.812" />
        <path fill="#888888" d="M55.907,56.562c-0.518,0-0.938,0.419-0.938,0.938c0,2.586-2.102,4.688-4.688,4.688s-4.688-2.102-4.688-4.688  c0-0.518-0.419-0.938-0.938-0.938S43.72,56.982,43.72,57.5c0,3.619,2.944,6.563,6.562,6.563s6.562-2.944,6.562-6.563  C56.845,56.982,56.425,56.562,55.907,56.562z"
        />
    </svg>
</div>
</div>
</body>
</html>